<!doctype html>
<html ng-app="angulardemo">
  <head>
    <title>Angular Leaflet Context Menu</title>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
    <link rel="stylesheet" href="../dist/leaflet.contextmenu.css"/>
    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
    <script src="../dist/leaflet.contextmenu.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
    <script src="js/angular-leaflet-directive.min.js"></script>
    <script>
    var app = angular.module('angulardemo', ['leaflet-directive']);

    app.controller('BasicCenterController', ['$scope', function ($scope) {
        angular.extend($scope, {
            auckland: {
                lat: -36.852668,
                lng: 174.762675,
                zoom: 15
            },
            defaults: {
                map: {
                    contextmenu: true,
                    contextmenuWidth: 140,
                    contextmenuItems: [{
                        text: 'Show coordinates',
                        callback: showCoordinates
                    }]
                }
            }
        });
    }]);

    function showCoordinates (e) {
        alert(e.latlng);
    }               

    </script>    
  </head>
  <body ng-controller="BasicCenterController">
    <leaflet lf-center="auckland" defaults="defaults" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"></leaflet>
  </body>
</html>
